<template>
  <view :class="customClass">
    <view class="order-item" @click="handleClick">
      <view class="flex pb20 mb30 flex-m">
        <view class="fs28">{{ obj.cinemaName }}</view>
        <view class="flex-right fs28">{{ obj.getOrderStatusName }}</view>
      </view>
      <view class="flex">
        <view class="flex-1 images">
          <view v-for="(item, index) in obj.imageUrl" :key="index">
            <zm-image
              :src="item"
              custom-style="width:136rpx;height:136rpx;margin-right:20rpx"
            ></zm-image>
          </view>
        </view>
        <view class="price">
          <price
            :price="obj.money"
            unit-size="24"
            price-size="38"
            custom-class="fb"
            color="#000"
          ></price>
          <view class="fs24 fc3 mt25">共{{ obj.merchandiseCount }}件</view>
        </view>
      </view>
      <!-- 出餐状态，0待出餐，1已取餐，2已预约，3出餐中，4待取餐，5取消出餐 -->
      <view v-if="obj.getOrderStatus !== '5'" class="flex pt20 flex-m mt20 bt">
        <view v-if="obj.getOrderStatus !== '2'" class="fs24">取餐码</view>
        <view
          v-if="obj.getOrderStatus !== '2'"
          class="ml25 fs36 b fc-yellow flex-1"
          >{{ obj.getFoodNo }}</view
        >
        <view
          v-if="obj.getOrderStatus === '2' || obj.getOrderStatus === '3'"
          :class="obj.getOrderStatus === '2' ? 'fc-blue' : ''"
          class="fs24"
          @click.stop="cancleOrder()"
          >{{ obj.getOrderStatus === '2' ? '取消订单' : obj.getFoodTime }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  import message from '@/utils/message'
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage,
      Price
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
      cancleOrder() {
        if (this.obj.getOrderStatus === '2') {
          const op = {
            title: '取消订单提醒',
            confirmColor: '#2FB3FF',
            content: '确认取消订单?\n取消后，券和支付金额将原路退回。',
            cancelText: '暂不取消',
            confirmText: '取消订单'
          }
          message.showModal(op).then(() => {
            uni.$api.orderFood
              .cancelOrder({ orderId: this.obj.id })
              .then((res) => this.$emit('reData'))
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-item {
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .detail {
      justify-content: space-between;
    }
    .images {
      height: 136rpx;
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
    }
  }
</style>
